<script src="/aifish/common/check.pjax.js"></script>
<article>
    <div class="toc-affix" style="width: 90px; height: 150px;">
        <div class="ant-affix" >
            <ul class="toc demos-anchor">
                <li><a href="#src-components-Button-demo-primary">默认样式</a></li>
                <li><a href="#src-components-Button-demo-secondary">次要按钮</a></li>
                <li><a href="#src-components-Button-demo-tertiary">三级按钮</a></li>
                <li><a href="#src-components-Button-demo-icon">带Icon的按钮</a></li>
                <li><a href="#src-components-Button-demo-text">文字按钮</a></li>
                <li><a href="#src-components-Button-demo-btn-group">按钮组</a></li>
                <li><a href="#src-components-Button-demo-loading">带loading的按钮</a></li>
            </ul>
        </div>
    </div>
    <section class="markdown">
        <h1>Button按钮</h1>
        <section class="markdown">
            <p>按钮用于开始一个即时操作。加<code>disabled</code>属性可设置为禁用</p>
            <h2 id="何时使用"><span>何时使用</span><a href="#何时使用" class="anchor">#</a></h2>
        </section>
        <h2>代码演示<i class="code-box-expand-trigger anticon anticon-appstore" title="展开全部代码"></i></h2></section>
    <div class="ant-row" style="margin-left: -8px; margin-right: -8px;">
        <div class="ant-col-12 code-boxes-col-2-1" style="padding-left: 8px; padding-right: 8px;">
            <section class="code-box expand" id="src-components-Button-demo-primary">
                <section id="J_vue_4g5l7z4b1t6" class="code-box-demo">
                    <div>
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
                    </div>
                </section>
                <section class="code-box-meta markdown">
                    <div class="code-box-title"><a href="#src-components-Button-demo-primary">默认样式</a></div>
                    <div>
                         <p>在要应用按钮样式的元素上添加<code>.btn</code>，再设置相应的颜色。</p>
                    </div>
                    <span class="collapse anticon anticon-circle-o-right" ></span>
                </section>
                <section class="highlight-wrapper highlight-wrapper-expand">
                    <div class="highlight">
                        <pre class="language-xml">
<code >&lt;button type=&quot;button&quot; class=&quot;btn btn-default&quot;&gt;Default&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-primary&quot;&gt;Primary&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-success&quot;&gt;Success&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-info&quot;&gt;Info&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-danger&quot;&gt;Danger&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-warning&quot;&gt;Warning&lt;/button&gt;</code></pre>
                    </div>
                </section>
            </section>
            <section class="code-box" id="src-components-Button-demo-tertiary">
                <section id="J_vue_iw3mdfv42u" class="code-box-demo">
                    <div>
<button type="button" class="btn btn-default btn-block">.btn-block</button>
<button type="button" class="btn btn-default btn-block btn-flat">.btn-block .btn-flat</button>
<button type="button" class="btn btn-default btn-block btn-sm">.btn-block .btn-sm</button>
                    </div>
                </section>
                <section class="code-box-meta markdown">
                    <div class="code-box-title"><a href="#src-components-Button-demo-tertiary">块级按钮</a></div>
                    <div>
                        <p>
                            添加<code>.btn-block</code>，让按钮进行块级显示。
                        </p>
                    </div><span class="collapse anticon anticon-circle-o-right" unselectable="none"></span></section>
                <section class="highlight-wrapper highlight-wrapper-expand">
                    <div class="highlight">
                        <pre class="language-xml">
<code>&lt;button type=&quot;button&quot; class=&quot;btn btn-default btn-block&quot;&gt;.btn-block&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-default btn-block btn-flat&quot;&gt;.btn-block .btn-flat&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-default btn-block btn-sm&quot;&gt;.btn-block .btn-sm&lt;/button&gt;</code></pre>
                    </div>
                </section>
            </section>
            <section class="code-box" id="src-components-Button-demo-text">
                <section id="J_vue_stvdtgx0zs" class="code-box-demo">
                    <div>
                        <div class="btn-group">
                           <button type="button" class="btn btn-default">Left</button>
                           <button type="button" class="btn btn-default">Middle</button>
                           <button type="button" class="btn btn-default">Right</button>
                        </div>
                        <div class="btn-group">
                           <button type="button" class="btn btn-default"><i class="fa fa-align-left"></i></button>
                           <button type="button" class="btn btn-default"><i class="fa fa-align-center"></i></button>
                           <button type="button" class="btn btn-default"><i class="fa fa-align-right"></i></button>
                        </div>
                        <div class="btn-group">
                           <button type="button" class="btn btn-default">1</button>
                           <button type="button" class="btn btn-default">2</button>
                           <div class="btn-group">
                            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                              <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu">
                              <li><a href="#">Dropdown link</a></li>
                              <li><a href="#">Dropdown link</a></li>
                            </ul>
                          </div>
                        </div>
                    </div>
                </section>
                <section class="code-box-meta markdown">
                    <div class="code-box-title"><a href="#src-components-Button-demo-text">文字按钮</a></div>
                    <div>
                        <p>
                            <!-- react-text: 277 -->文字型按钮
                            <!-- /react-text -->
                        </p>
                    </div><span class="collapse anticon anticon-circle-o-right" unselectable="none"></span></section>
                <section class="highlight-wrapper">
                   
                </section>
            </section>
            <section class="code-box" id="src-components-Button-demo-loading">
                <section id="J_vue_c6ii7duz7tf" class="code-box-demo">
                    <div>
                        <p>With dropdown</p>
                          <div class="input-group margin">
                            <div class="input-group-btn">
                              <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Action
                                <span class="fa fa-caret-down"></span></button>
                              <ul class="dropdown-menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li class="divider"></li>
                                <li><a href="#">Separated link</a></li>
                              </ul>
                            </div>
                            <!-- /btn-group -->
                            <input type="text" class="form-control">
                          </div>
                          <!-- /input-group -->
                          <p>Normal</p>

                          <div class="input-group margin">
                            <div class="input-group-btn">
                              <button type="button" class="btn btn-danger">Action</button>
                            </div>
                            <!-- /btn-group -->
                            <input type="text" class="form-control">
                          </div>
                          <!-- /input-group -->
                          <p>Flat</p>

                          <div class="input-group margin">
                            <input type="text" class="form-control">
                                <span class="input-group-btn">
                                  <button type="button" class="btn btn-info btn-flat">Go!</button>
                                </span>
                          </div>
                          <!-- /input-group -->
                    </div>
                </section>
                <section class="code-box-meta markdown">
                    <div class="code-box-title"><a href="#src-components-Button-demo-loading">带loading的按钮</a></div>
                    <div>
                        <p>
                            <!-- react-text: 291 -->带loading的按钮
                            <!-- /react-text -->
                        </p>
                    </div><span class="collapse anticon anticon-circle-o-right" unselectable="none"></span></section>
                <section class="highlight-wrapper">
                    
                </section>
            </section>
        </div>
        <div class="ant-col-12 code-boxes-col-2-1" style="padding-left: 8px; padding-right: 8px;">
            <section class="code-box" id="src-components-Button-demo-secondary">
                <section id="J_vue_z0xtotnq5o" class="code-box-demo">
                    <div>
<button type="button" class="btn btn-default btn-lg">Default-lg</button>
<button type="button" class="btn btn-default btn-sm">Default-sm</button>
<button type="button" class="btn btn-default btn-xs">Default-xs</button>
                    </div>
                </section>
                <section class="code-box-meta markdown">
                    <div class="code-box-title">
                        <a href="#src-components-Button-demo-secondary">按钮尺寸</a>
                    </div>
                    <div>
                        <p>在要应用按钮样式的元素上添加<code>.btn-lg</code>，共有三种尺寸。</p>
                    </div>
                    <span class="collapse anticon anticon-circle-o-right" unselectable="none"></span>
                </section>
                <section class="highlight-wrapper highlight-wrapper-expand">
                    <div class="highlight">
                        <pre class="language-xml">
<code>&lt;button type=&quot;button&quot; class=&quot;btn btn-default btn-lg&quot;&gt;Default-lg&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-default btn-sm&quot;&gt;Default-sm&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-default btn-xs&quot;&gt;Default-xs&lt;/button&gt;</code></pre>
                    </div>
                </section>
            </section>
            <section class="code-box" id="src-components-Button-demo-icon">
                <section id="J_vue_ych5ygauws" class="code-box-demo">
                    <div>
                        <a class="btn btn-app">
                        <i class="fa fa-edit"></i> Edit
                      </a>
                      <a class="btn btn-app">
                        <i class="fa fa-play"></i> Play
                      </a>
                      <a class="btn btn-app">
                        <i class="fa fa-repeat"></i> Repeat
                      </a>
                      <a class="btn btn-app">
                        <i class="fa fa-pause"></i> Pause
                      </a>
                      <a class="btn btn-app">
                        <i class="fa fa-save"></i> Save
                      </a>
                      <a class="btn btn-app">
                        <span class="badge bg-yellow">3</span>
                        <i class="fa fa-bullhorn"></i> Notifications
                      </a>
                      <a class="btn btn-app">
                        <span class="badge bg-green">300</span>
                        <i class="fa fa-barcode"></i> Products
                      </a>
                      <a class="btn btn-app">
                        <span class="badge bg-purple">891</span>
                        <i class="fa fa-users"></i> Users
                      </a>
                      <a class="btn btn-app">
                        <span class="badge bg-teal">67</span>
                        <i class="fa fa-inbox"></i> Orders
                      </a>
                      <a class="btn btn-app">
                        <span class="badge bg-aqua">12</span>
                        <i class="fa fa-envelope"></i> Inbox
                      </a>
                      <a class="btn btn-app">
                        <span class="badge bg-red">531</span>
                        <i class="fa fa-heart-o"></i> Likes
                      </a>
                    </div>
                </section>
                <section class="code-box-meta markdown">
                    <div class="code-box-title"><a href="#src-components-Button-demo-icon">带Icon的按钮</a></div>
                    <div>
                        <p>
                            <!-- react-text: 320 -->带有icon的按钮
                            <!-- /react-text -->
                        </p>
                    </div><span class="collapse anticon anticon-circle-o-right" unselectable="none"></span></section>
                <section class="highlight-wrapper">
                    
                </section>
            </section>
            <section class="code-box" id="src-components-Button-demo-btn-group">
                <section id="J_vue_pm6genjc1ek" class="code-box-demo">
                    <div>
                        <div class="btn-group">
                          <button type="button" class="btn btn-default">Action</button>
                          <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                            <span class="caret"></span>
                            <span class="sr-only">Toggle Dropdown</span>
                          </button>
                          <ul class="dropdown-menu" role="menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                          </ul>
                        </div>
                        <div class="btn-group">
                          <button type="button" class="btn btn-info">Action</button>
                          <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
                            <span class="caret"></span>
                            <span class="sr-only">Toggle Dropdown</span>
                          </button>
                          <ul class="dropdown-menu" role="menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                          </ul>
                        </div>
                        <div class="btn-group">
                          <button type="button" class="btn btn-danger">Action</button>
                          <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
                            <span class="caret"></span>
                            <span class="sr-only">Toggle Dropdown</span>
                          </button>
                          <ul class="dropdown-menu" role="menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                          </ul>
                        </div>
                    </div>
                </section>
                <section class="code-box-meta markdown">
                    <div class="code-box-title"><a href="#src-components-Button-demo-btn-group">按钮组</a></div>
                    <div></div><span class="collapse anticon anticon-circle-o-right" unselectable="none"></span></section>
                <section class="highlight-wrapper">
                    
                </section>
            </section>
            <section class="code-box" id="src-components-Button-demo-btn-group">
                <section id="J_vue_pm6genjc1ek" class="code-box-demo">
                    <div>
                        <p>Mix and match with various background colors. Use base class <code>.btn</code> and add any available
                        <code>.bg-*</code> class</p>
                      <!-- You may notice a .margin class added
                      here but that's only to make the content
                      display correctly without having to use a table-->
                      <p>
                        <button type="button" class="btn bg-maroon btn-flat margin">.btn.bg-maroon.btn-flat</button>
                        <button type="button" class="btn bg-purple btn-flat margin">.btn.bg-purple.btn-flat</button>
                        <button type="button" class="btn bg-navy btn-flat margin">.btn.bg-navy.btn-flat</button>
                        <button type="button" class="btn bg-orange btn-flat margin">.btn.bg-orange.btn-flat</button>
                        <button type="button" class="btn bg-olive btn-flat margin">.btn.bg-olive.btn-flat</button>
                      </p>

                      <p>
                        <button type="button" class="btn bg-maroon margin">.btn.bg-maroon</button>
                        <button type="button" class="btn bg-purple margin">.btn.bg-purple</button>
                        <button type="button" class="btn bg-navy margin">.btn.bg-navy</button>
                        <button type="button" class="btn bg-orange margin">.btn.bg-orange</button>
                        <button type="button" class="btn bg-olive margin">.btn.bg-olive</button>
                      </p>
                    </div>
                </section>
                <section class="code-box-meta markdown">
                    <div class="code-box-title"><a href="#src-components-Button-demo-btn-group">按钮组</a></div>
                    <div></div><span class="collapse anticon anticon-circle-o-right" unselectable="none"></span></section>
                <section class="highlight-wrapper">
                    
                </section>
            </section>
        </div>
    </div>
    <section class="markdown api-container">
        <h2 id="API"><span><!-- react-text: 341 -->API<!-- /react-text --></span><a href="#API" class="anchor">#</a></h2>
        <h3 id="Button"><span><!-- react-text: 345 -->Button<!-- /react-text --></span><a href="#Button" class="anchor">#</a></h3>
        <table>
            <thead>
                <tr>
                    <th>
                        <!-- react-text: 351 -->属性
                        <!-- /react-text -->
                    </th>
                    <th>
                        <!-- react-text: 353 -->说明
                        <!-- /react-text -->
                    </th>
                    <th>
                        <!-- react-text: 355 -->类型
                        <!-- /react-text -->
                    </th>
                    <th>
                        <!-- react-text: 357 -->默认值
                        <!-- /react-text -->
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <!-- react-text: 361 -->value
                        <!-- /react-text -->
                    </td>
                    <td>
                        <!-- react-text: 363 -->按钮上显示的文字
                        <!-- /react-text -->
                    </td>
                    <td>
                        <!-- react-text: 365 -->String
                        <!-- /react-text -->
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <td>
                        <!-- react-text: 369 -->large
                        <!-- /react-text -->
                    </td>
                    <td>
                        <!-- react-text: 371 -->按钮尺寸，大
                        <!-- /react-text -->
                    </td>
                    <td>
                        <!-- react-text: 373 -->Boolean
                        <!-- /react-text -->
                    </td>
                    <td>
                        <!-- react-text: 375 -->false
                        <!-- /react-text -->
                    </td>
                </tr>
                <tr>
                    <td>
                        <!-- react-text: 378 -->small
                        <!-- /react-text -->
                    </td>
                    <td>
                        <!-- react-text: 380 -->按钮尺寸，小
                        <!-- /react-text -->
                    </td>
                    <td>
                        <!-- react-text: 382 -->Boolean
                        <!-- /react-text -->
                    </td>
                    <td>
                        <!-- react-text: 384 -->false
                        <!-- /react-text -->
                    </td>
                </tr>
                <tr>
                    <td>
                        <!-- react-text: 387 -->primary
                        <!-- /react-text -->
                    </td>
                    <td>
                        <!-- react-text: 389 -->按钮类型，主按钮
                        <!-- /react-text -->
                    </td>
                    <td>
                        <!-- react-text: 391 -->Boolean
                        <!-- /react-text -->
                    </td>
                    <td>
                        <!-- react-text: 393 -->false
                        <!-- /react-text -->
                    </td>
                </tr>
                <tr>
                    <td>
                        <!-- react-text: 396 -->secondary
                        <!-- /react-text -->
                    </td>
                    <td>
                        <!-- react-text: 398 -->按钮类型，次按钮
                        <!-- /react-text -->
                    </td>
                    <td>
                        <!-- react-text: 400 -->Boolean
                        <!-- /react-text -->
                    </td>
                    <td>
                        <!-- react-text: 402 -->false
                        <!-- /react-text -->
                    </td>
                </tr>
                <tr>
                    <td>
                        <!-- react-text: 405 -->tertiary
                        <!-- /react-text -->
                    </td>
                    <td>
                        <!-- react-text: 407 -->按钮类型，三级按钮
                        <!-- /react-text -->
                    </td>
                    <td>
                        <!-- react-text: 409 -->Boolean
                        <!-- /react-text -->
                    </td>
                    <td>
                        <!-- react-text: 411 -->false
                        <!-- /react-text -->
                    </td>
                </tr>
                <tr>
                    <td>
                        <!-- react-text: 414 -->text
                        <!-- /react-text -->
                    </td>
                    <td>
                        <!-- react-text: 416 -->按钮类型，文字型按钮
                        <!-- /react-text -->
                    </td>
                    <td>
                        <!-- react-text: 418 -->Boolean
                        <!-- /react-text -->
                    </td>
                    <td>
                        <!-- react-text: 420 -->false
                        <!-- /react-text -->
                    </td>
                </tr>
                <tr>
                    <td>
                        <!-- react-text: 423 -->disabled
                        <!-- /react-text -->
                    </td>
                    <td>
                        <!-- react-text: 425 -->按钮类型，失效按钮
                        <!-- /react-text -->
                    </td>
                    <td>
                        <!-- react-text: 427 -->Boolean
                        <!-- /react-text -->
                    </td>
                    <td>
                        <!-- react-text: 429 -->false
                        <!-- /react-text -->
                    </td>
                </tr>
                <tr>
                    <td>
                        <!-- react-text: 432 -->loading
                        <!-- /react-text -->
                    </td>
                    <td>
                        <!-- react-text: 434 -->按钮类型，loading模式
                        <!-- /react-text -->
                    </td>
                    <td>
                        <!-- react-text: 436 -->Boolean
                        <!-- /react-text -->
                    </td>
                    <td>
                        <!-- react-text: 438 -->false
                        <!-- /react-text -->
                    </td>
                </tr>
            </tbody>
        </table>
        <h3 id="Button.Group"><span><!-- react-text: 441 -->Button.Group<!-- /react-text --></span><a href="#Button.Group" class="anchor">#</a></h3>
        <table>
            <thead>
                <tr>
                    <th>
                        <!-- react-text: 447 -->属性
                        <!-- /react-text -->
                    </th>
                    <th>
                        <!-- react-text: 449 -->说明
                        <!-- /react-text -->
                    </th>
                    <th>
                        <!-- react-text: 451 -->类型
                        <!-- /react-text -->
                    </th>
                    <th>
                        <!-- react-text: 453 -->默认值
                        <!-- /react-text -->
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <!-- react-text: 457 -->large
                        <!-- /react-text -->
                    </td>
                    <td>
                        <!-- react-text: 459 -->按钮组尺寸，大
                        <!-- /react-text -->
                    </td>
                    <td>
                        <!-- react-text: 461 -->Boolean
                        <!-- /react-text -->
                    </td>
                    <td>
                        <!-- react-text: 463 -->false
                        <!-- /react-text -->
                    </td>
                </tr>
                <tr>
                    <td>
                        <!-- react-text: 466 -->small
                        <!-- /react-text -->
                    </td>
                    <td>
                        <!-- react-text: 468 -->按钮组尺寸，小
                        <!-- /react-text -->
                    </td>
                    <td>
                        <!-- react-text: 470 -->Boolean
                        <!-- /react-text -->
                    </td>
                    <td>
                        <!-- react-text: 472 -->false
                        <!-- /react-text -->
                    </td>
                </tr>
            </tbody>
        </table>
        <style>
        #src-components-Button-demo-btn-group .atui-btn-group {
            margin-bottom: 10px;
        }
        </style>
    </section>
</article>